<!-- 规格展示页 -->
<template>
	<view class="p-display">
		<!-- 产品展示 -->
		<view class="product">
			<view class="product-item " v-for="(item,index) in dataList" :key='index'>
				<!-- <view class="product-img">
					<image :src="item.img?item.img:require('../../static/nopic2.png')" class="product-img" />
				</view> -->
				<view class="product-item-center">
					<view class="product-item-center-name u-line-2">{{item.name}}</view>
					<view class="product-stock">
						<!-- <view class="product-stock-number">会员价：{{item.vip_price}}</view> -->
						<view class="product-stock-number">库存：{{item.stock_num}}</view>
						<view class="product-stock-number">￥{{item.amount}}</view>
					</view>
				</view>
				<view class="product-item-right">
					<view class="product-item-delete" @click="onDelete(item.pk_id)">
						<image src="../../static/delete.jpg" class="product-item-delete-img"></image>
					</view>
					<view class="pro-down-up">
						<view class="pro-down-up-title" :class="{'pro-down-up-active':item.status==0?false:true}"
							@click="onDpwnUp(index,1)">
							上架
						</view>
						<view class="pro-down-up-title" :class="{'pro-down-up-active':item.status==1?false:true}"
							@click="onDpwnUp(index,0)">
							下架
						</view>
					</view>
					<!-- <view class="product-fun" @click="onEdit(item)">编辑产品</view> -->
				</view>
			</view>
			<!--  占位置 因为下面有个固定定位的添加规格按钮 -->
			<view class="line"></view>
		</view>
		<!-- <view class="tabTitle" @click="onEdit(pk_id)">
			<view class="tabTitle-name">
				添加规格
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'

	import {
		uniModal
	} from '@/utils/uniPromise.js'

	export default {
		mixins: [pagingMixin],
		data() {
			return {
				fk_travelagencypro_id: false,
				productList: {}, //列表选择的规格

			}
		},

		onLoad(options) {
			this.fk_travelagencypro_id = options.id
		},
		onShow() {
			this.initPage()
		},

		methods: {
			// 编辑产品
			onEdit(el) {
				this.productList = el
				this.$to('/package/system/product/p-stock/edit/index')
			},

			// 删除规格
			onDelete(pk_id) {
				uniModal({
					content: '确认删除商品？'
				}).then(res => {
					this.$loading('请稍等')
					this.$DeleteManagerData(19, pk_id).then(res => {
						this.$hide()
						this.$toast('删除成功')
						this.initPage()
					})
				})

			},

			//切换产品上架下架
			onDpwnUp(index, el) {
				this.$loading('请稍等')
				this.$set(this.dataList[index], 'status', el)
				let params = {
					status: el,
					pk_id: this.dataList[index].pk_id
				}
				this.$UpdateModify('b_travelagency_stock', {
					...params
				}).then(res => {
					this.initPage()
					this.$hide()
					this.$toast(el == 1 ? '上架成功' : '下架成功')
				})

			},

			// 初始化页面
			initPage() {
				let {
					fk_travelagencypro_id
				} = this
				if (fk_travelagencypro_id) {
					let params = {
						fk_travelagencypro_id,
					}
					this._init_data('', {
						...params
					}, {
						name: 'b_travelagency_stock'
					})

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 产品展示
	.product {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;

		.product-img {
			width: 178rpx;
			height: 178rpx;
			margin-right: 21rpx;
			border-radius: 10rpx;
		}

		.product-item {
			display: flex;
			background-color: #fff;
			padding: 22rpx;
			box-sizing: border-box;
			justify-content: space-between;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			width: 100%;

			.product-item-center {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 70%;
				font-size: 28rpx;
				font-weight: bold;
				color: #002222;

				.product-item-center-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #002222;
					margin-bottom: 10rpx;
				}

				.product-stock-number {
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}

				.product-stock-price {
					margin-top: 10rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FF0E0E;
				}
			}
		}

		.product-item-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.product-item-delete {
				width: 100%;
				display: flex;
				justify-content: flex-end;

				.product-item-delete-img {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.pro-down-up {
				display: flex;
				width: 150rpx;
				height: 46rpx;
				border-radius: 4rpx;
				box-sizing: border-box;
				border: 1rpx solid #3297EF;

				.pro-down-up-title {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					color: #3297EF;
					font-size: 26rpx;
				}

				.pro-down-up-active {
					color: #fff;
					background-color: #3297EF;
				}
			}

			.product-fun {
				width: 150rpx;
				text-align: center;
				line-height: 46rpx;
				height: 46rpx;
				background: #FFFFFF;
				border: 1rpx solid #333333;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}

	}

	// 占位
	.line {
		width: 100%;
		height: 108rpx;
	}

	// 添加规格
	.tabTitle {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 100%;
		height: 138rpx;
		padding: 30rpx 45rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-top: 1rpx solid #f5f5f5;

		.tabTitle-name {
			width: 100%;
			height: 88rpx;
			background: #3297EF;
			border-radius: 8rpx;
			color: #ffffff;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>
